import { DeleteOutlined, EditOutlined, PlusSquareOutlined } from '@ant-design/icons';
import { Button, Col, Row, Space, Table, Drawer, Form, Input, message, Popconfirm } from 'antd';
import React, { useEffect, useState } from 'react'
import { catAddAPI, catDelAPI, catEidtAPI, catListAPI } from '../../service/article'

function CatList() {
  //定义状态，用于保存接口返回数据
  const [list, setList] = useState([])
  //定义状态 添加成功以后从新渲染
  const [a, setA] = useState(0)
  //保存抽屉状态
  const [open, setOpen] = useState(false);
  //定义状态用于保存修改的ID
  const [id, setId] = useState('')
  //获取表单实例
  const [myForm] = Form.useForm()
  //请求文章分内列表数据
  //挂载后再请求
  useEffect(() => {
    //声明周期函数中不建议使用async,await
    catListAPI().then((res) => {
      console.log(res);
      //把获取到的数据给到状态中setList
      setList(res.data)
    })
  }, [a])

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      align: 'center'
    },
    {
      title: '分类名称',
      dataIndex: 'cname',
      key: 'cname',
      align: 'center'
    },
    {
      title: '操作',
      dataIndex: 'op',
      key: 'op',
      align: 'center',
      //固定渲染render
      render: (v, r) => {
        return <Space>
          <Button type='primary' icon={<EditOutlined />} size="small"
            onClick={() => {
              // 在renderAPI中  ; v代表当前的值，r代表当前这一行的数据
              console.log(r);
              //先打开抽屉
              setOpen(true)
              //把这条数据传递到表单中
              myForm.setFieldsValue(r)
              //点击按钮时把当前ID存下来
              setId(r.id)
            }}
          ></Button>

          <Popconfirm
            title="删除提示"
            description="你确认要删除当前数据吗?"
            okText="确认"
            cancelText="取消"
            onConfirm={async () => {
              console.log(r);
              //请求接口 删除当前项
              const res = await catDelAPI(r)
              // console.log(res);
              // await catDelAPI({id: r.id})
              if (res.code === 200) {
                message.success('删除成功')
                //从新渲染页面
                setA(a + 1)
              } else {
                message.error('删除失败')
              }
            }}
          >
            <Button
              type='primary'
              icon={<DeleteOutlined />}
              size="small" danger
            ></Button>
          </Popconfirm>

        </Space>
      }
    },
  ];

  return <>
    <Space direction='vertical' size='middle' style={{ width: '100%', height: '100%', overflow: 'auto' }}>
      <Row>
        <Col span={24}>
          <Button type='primary' icon={<PlusSquareOutlined />}
            onClick={() => { setOpen(true) }}
          >
            新增分类
          </Button>
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          {/* rowKey='id' 表示使用每条数据的ID作为key值 */}
          <Table dataSource={list} columns={columns} rowKey='id' />;
        </Col>
      </Row>
    </Space>
    {/* 抽屉组件 */}
    <Drawer
      title="新增分类"
      placement="right"
      onClose={() => { setOpen(false) }}
      open={open}
      //点击遮罩层关闭抽屉API
      maskClosable={false}
      //关闭抽屉清除内容
      destroyOnClose

    >
      {/* //onFinish点击添加按钮触发 */}
      <Form
        preserve={false}//FromAPI 点击修改后，一旦取消删除控件中的值
        form={myForm}
        onFinish={async (v) => {
          console.log(v);

          //判断状态中是否有ID，如果没有id时添加，否则是修改
          if (!id) {
            //请求接口 ，此处时一个异步请求，使用.then 或者async 
            const res = await catAddAPI(v)
            console.log(res);
            message.success('分类添加成功')
          } else {
            const res = await catEidtAPI({ ...v, id })
            console.log(res)
            if (res.code === 200) {
              message.success('修改成功')
            } else {
              message.error('修改失败')
            }

          }
          //把ID设置为空
          setId('')

          //从新渲染 Math.random()随机数 
          setA(Math.random())
          //关闭窗口
          setOpen(false)
        }}>
        <Form.Item
          name='cname'
          label='分类名称'
          rules={[{
            required: true, //开启验证，不能为空
            message: '分内名称不能为空'

          }]}>
          <Input placement='请输入名称' />
        </Form.Item>
        <Form.Item style={{ textAlign: "right" }}>
          {/* htmlType */}
          <Button type='primary' htmlType='submit'>添加</Button>
        </Form.Item>
      </Form>
    </Drawer>
  </>
}

export default CatList
